<template>
	<view class="content">
		<view class="mine-header">
			<view class="mine-header-content">
				<view class="mine-header-avatar"></view>
				<view class="mine-header-user">{{ userInfo?.user.userName }}</view>
				<view class="mine-header-email">{{ userInfo?.user.email }}</view>
			</view>
		</view>
		<view class="mine-logut">
			<wd-button size="large" plain @click="logOut"  style="width: 60%;">退出登录</wd-button>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	import { useUserStore } from "@/stores/user";

	const {userInfo, logOutFun} = useUserStore();

	// console.log(userInfo);

	const logOut = async() => {
		logOutFun();
	}

</script>

<style lang="scss">
.content {
  .mine-header {
		background-color: #7455F6;
		border-radius: 30px 30px 4em 4em;
		height: 600upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.mine-header-content {
			.mine-header-avatar {
				text-align: center;
				background-color: #ff8b77;
				border-radius: 20px;
				height: 60px;
			}
			.mine-header-user {
				color: #fff;
				margin: 10px 0;
				font-size: 24px;
				font-weight: 600;
				text-align: center;
			}
			.mine-header-email {
				color: #fff;
				text-align: center;
			}
		}
	}
	.mine-logut {
		text-align: center;
		margin-top: -22px;
	}
}
</style>
